<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="${basePath}/css/style.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/css/my.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="${basePath}/css/jquery.validate.css"/>
<script type="text/javascript" src="${basePath}/js/validation/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${basePath}/js/validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="${basePath}/js/validation/messages_zh.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		
		$(".name22").change(function(){
			var path = "${basePath}";
			var name = $(this).val();
			$.ajax({
				url : path + '/product/isname',
				type : 'POST', // GET
				async : false, // 或false,是否异步
				data : {
					'name' : name
				},
				timeout : 5000, // 超时时间
				dataType : 'json', // 返回的数据格式：json/xml ml/script/jsonp/text
				success : function(data) {
					$('.name22').next().empty();
					if(!data){
						$('.name22').after('<label id="admin-error" style="color:#008000" for="admin">未使用的名称，可以进行注册</label>');
					}else{
						$('.name22').after('<label id="admin-error" class="error" for="admin">已使用的名称，请查阅</label>');
					}
				},
				error : function(xhr, textStatus) {
					alert('错误' + textStatus);
				}
			});
		});
		
		$(".name333").change(function(){
			var path = "${basePath}";
			var name = $(this).val();
			$.ajax({
				url : path + '/product/isname',
				type : 'POST', // GET
				async : false, // 或false,是否异步
				data : {
					'name' : name
				},
				timeout : 5000, // 超时时间
				dataType : 'json', // 返回的数据格式：json/xml ml/script/jsonp/text
				success : function(data) {
					$('.name333').next().empty();
					if(!data){
						$('.name333').after('<label id="admin-error" style="color:#008000" for="admin">未使用的名称，可以进行注册</label>');
					}else{
						$('.name333').after('<label id="admin-error" class="error" for="admin">已使用的名称，请查阅</label>');
					}
				},
				error : function(xhr, textStatus) {
					alert('错误' + textStatus);
				}
			});
		});
		
		$(".click").click(function() {
			$(".tip3").fadeIn(200);
		});

		$(".tiptop a").click(function() {
			$(".tip").fadeOut(200);
			$(".tip2").fadeOut(200);
			$(".tip3").fadeOut(200);
			$(".tip4").fadeOut(200);
		});

		$(".sure").click(function() {
			$(".tip").fadeOut(100);
		});

		$(".cancel").click(function() {
			$(".tip").fadeOut(100);
			$(".tip2").fadeOut(100);
			$(".tip3").fadeOut(200);
			$(".tip4").fadeOut(200);
		});
		
		
		$("#mainFrom").validate({
			rules:{
				"name" : "required",
				"price" : "required",
				"stock" : {
					required : true,
					digits : true,
					maxlength: 5,
					minlength: 1
				},
				"categoryId" : "required"
			},
			message:{
				
			}
		});
		
		$("#mainFrom2").validate({
			rules:{
				"name" : "required",
				"price" : "required",
				"stock" : {
					required : true,
					digits : true,
					maxlength: 5,
					minlength: 1
				},
				"categoryId" : "required"
			},
			message:{
				
			}
		});
		
	});

	function onModified(url, name) {
		$("#im").attr("src", url);
		$("#na").html(name);
		$(".tip").fadeIn(200);
	}
	
	function onck(id,name,cateid,price,stock) {
		$('#naa').html(name);
		$('#id').val(id);
		$('#name1').val(name);
		$('#price1').val(price);
		$('#stock1').val(stock);
		$('#category1').val(cateid);
		$(".tip2").fadeIn(200);
	}
	
	function onde(id,name) {
		$('#id2').val(id);
		$('#name3').val(name);
		$(".tip4").fadeIn(200);
	}


	function isfile() {
		var file = $("#imgFile").val();
		if (file != null) {
			$("#title").val("图片已成功上传图片");
			$("#title").css("color", "#00F");
		}
	}
	
	function isfile2() {
		var file = $("#imgFile2").val();
		if (file != null) {
			$("#title2").val("图片已成功上传图片");
			$("#title2").css("color", "#00F");
		}
	}
</script>
</head>
<body>
	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			<li><a href="#">首页</a></li>
			<li><a href="#">商品管理</a></li>
		</ul>
	</div>

	<div class="rightinfo">

		<div class="tools">

			<ul class="toolbar">
				<li class="click"><span><img
						src="${basePath}/images/t01.png" /></span>添加</li>
			</ul>
		</div>

		<table class="tablelist">
			<thead>
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>价格</th>
					<th>数量</th>
					<th>分类</th>
					<th>对应图片</th>
					<th>商品详情操作</th>
					<th>商品参数操作</th>
					<th>商品备注操作</th>
					<th>操作</th>
				</tr>
			</thead>
			<c:forEach items="${list}" var="item" varStatus="s">
				<tr>
					<td>${item.id}</td>
					<td>${item.name}</td>
					<td>${item.price}</td>
					<td>${item.stock}</td>
					<td>${item.category}</td>
					<td><a style="color:#00F" href="javascript:void(0)" onclick="onModified('${item.mainImgUrl}','${item.name}')">图片</a></td>
					<td><a href="${basePath}/product/byimgs?id=${item.id}" style="color:#A9A9A9">${item.name}--详情</a></td>
					<td><a href="${basePath}/product/byproper?id=${item.id}" style="color:#E9967A">${item.name}--参数</a></td>
					<td><a href="${basePath}/product/bynote?id=${item.id}" style="color:#DAA520">${item.name}--备注</a></td>
					<td><a style="color:#00F" href="javascript:void(0)"  href="#" class="tablelink"  onclick="onck('${item.id}','${item.name}','${item.categoryId}','${item.price}','${item.stock}')">修改</a> 
					<a style="color:#00F" href="javascript:void(0)"  href="#" class="delete"  onclick="onde('${item.id}','${item.name}')">删除</a></td>
				</tr>
			</c:forEach>
		</table>
		<table class="hovertable" style="width: 1718px;">
		<tr>
			<td align="left" style="border:none;">总记录数:${page.total}&nbsp;&nbsp;&nbsp;每页最大显示：${page.show}</td>
			<td style="border:none;">
			<c:if test="${page.page ne '1'}">
				<a href="${basePath}/product/list?page=1" style="color:#000">[首页]</a>&nbsp;&nbsp; 
			    <a href="${basePath}/product/list?page=${page.page-1}" style="color:#000">[上一页]</a>&nbsp;&nbsp;
			</c:if>
			<c:if test="${page.page ne page.totalPage}">
				<a href="${basePath}/product/list?page=${page.page+1}" style="color:#000">[下一页]</a>&nbsp;&nbsp; 
				<a href="${basePath}/product/list?page=${page.totalPage}" style="color:#000">[尾页]</a>&nbsp;&nbsp;
			</c:if> 
			</td>
			<td align="right" style="border:none;">第${page.page}/${page.totalPage}页
			</td>
		</tr>
	</table>


		<div class="tip">
			<div class="tiptop">
				<span>查看图片</span><a></a>
			</div>

			<form method="post" class="basic-grey">
				<h1>
					查看该项的图片 <span>查看产品图片为：<span style="color:#F00" id="na"></span></span>
				</h1>
				<image style="width:450px;height:450px;margin-left:10px;" id="im"
					src=""></image>
			</form>
		</div>

		<div class="tip2">
			<div class="tiptop">
				<span>商品信息修改</span><a></a>
			</div>

			<form id="mainFrom2" method="post" action="${basePath}/product/modify" class="basic-grey" enctype="multipart/form-data">
				<h1>
					对已存在的商品重新分类<span>你所要操作的商品为：<span style="color:#F00" id="naa"></span></span>
				</h1>
				<input type="hidden" id="id" name="id" /> 
				<label> 
					<span>商品名称 :</span> 
					<input id="name1" type="text" class="name333" name="name" readonly="true"/>
				</label>
				<label> 
					<span>商品价格 :</span> 
					<input id="price1" type="text" name="price" />
				</label>
				<label> 
					<span>商品数量 :</span> 
					<input id="stock1" type="text" name="stock" />
				</label>
				<label> 
				<span>商品分类 :</span>
				<select id="category1" name="categoryId">
						<option value="">--请选择--</option>
						<c:forEach items="${list2}" var="item2" varStatus="s">
							<option value="${item2.id}">${item2.name}</option>
						</c:forEach>
				</select>
				</label>
				<label> 
				<input id="title2" style="margin-left:101px;width:250px;color:red" type="text" value="请挑选对应图片" readonly="true" />
					<a href="javascript:" class="a-upload" style="color:#00F">选择图片
					<input id="imgFile2" name="imgFile" type="file" onchange="isfile2()" /></a>
				</label>			
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="修改" />&nbsp; <input
						name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>

		<div class="tip3">
			<div class="tiptop">
				<span>添加商品</span><a></a>
			</div>

			<form id="mainFrom" method="post" action="${basePath}/product/inser" class="basic-grey" enctype="multipart/form-data">
				<h1>
					添加商品（与商品管理中的添加商品一致）<span>你可以从这里添加你的商品至商品列表</span>
				</h1>
				<label> 
					<span>商品名称 :</span> 
					<input id="name" type="text" class="name22" name="name" />
				</label>
				<label> 
					<span>商品价格 :</span> 
					<input id="price" type="text" name="price" />
				</label>
				<label> 
					<span>商品数量 :</span> 
					<input id="stock" type="text" name="stock" />
				</label>
				<label> 
				<span>商品分类 :</span>
				<select id="category" name="categoryId">
						<option value="">--请选择--</option>
						<c:forEach items="${list2}" var="item2" varStatus="s">
							<option value="${item2.id}">${item2.name}</option>
						</c:forEach>
				</select>
				</label>
				<label> 
				<input id="title" style="margin-left:101px;width:250px;color:red" type="text" value="请挑选对应图片" readonly="true" />
					<a href="javascript:" class="a-upload" style="color:#00F">选择图片
					<input id="imgFile" name="imgFile" type="file" onchange="isfile()" /></a>
				</label>
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="添加" />&nbsp; <input
						name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>
		
		<div class="tip4">
			<div class="tiptop">
				<span>删除商品</span><a></a>
			</div>

			<form method="post" action="${basePath}/product/delete" class="basic-grey" enctype="multipart/form-data">
				<h1>
					对商品进行删除<span>你可以把该商品，从商品列表删除！！</span>
				</h1>
				<input type="hidden" id="id2" name="id" /> 
				<label> 
					<span>商品名称 :</span> 
					<input id="name3" type="text" name="name" readonly="true"/>
				</label>
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="添加" />&nbsp; <input
						name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>

		<script type="text/javascript">
			$('.tablelist tbody tr:odd').addClass('odd');
		</script>
</body>

</html>
